<template>
  <div class="home">
    <!-- 头部布局 -->
    <el-row>
      <el-col :span="24" class="gray">
        <el-row>
          <el-col :span="15"></el-col>
          <el-col :span="9">
            <el-row>
              <el-col :span="3" @click="loginBtn"> 登录</el-col>
              <el-col :span="1">|</el-col>
              <el-col :span="3">注册</el-col>
              <el-col :span="5">我的订单</el-col>
              <el-col :span="5">我的收藏</el-col>
              <el-col :span="5"> <el-button>购物车</el-button></el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 主体 -->
    <div class="home_flag mt">
      <div><img src="@/assets/img/1.png" alt="" /></div>
      <div>
        <ul class="home_flag mt">
          <router-link to="/page" tag="li" class="m30">首页</router-link>
          <router-link to="/goods" tag="li">全部商品</router-link>
          <router-link to="/us" tag="li" class="m30">关于我们</router-link>
        </ul>
      </div>
      <!-- 搜索框 -->
      <div>
        <el-col :span="7" class="mt">
          <div class="mt-4">
            <el-input
              v-model="search"
              placeholder="请输入搜索内容"
              class="input-with-select"
              style="width: 300px"
            >
              <template #append>
                <el-button>
                  <el-icon> <Search /> </el-icon
                ></el-button>
              </template>
            </el-input>
          </div>
        </el-col>
      </div>
    </div>

    <!-- 坑 -->
    <section>
      <router-view></router-view>
    </section>
    <div class="footer"><img src="@/assets/img/2.png" alt="" /></div>
    <!-- 登录对话框 -->
    <el-dialog v-model="loginDialog" title="登录" width="55%">
      <div>
        <el-form :model="loginForm" label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.userName" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginForm.password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loginDiaOk">确定</el-button>
            <el-button @click="loginDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import { getLoginApi, carousel } from "@/http/api.js";
import { ElMessage } from "element-plus";

export default {
  name: "home",
  components: {},
  setup() {
    // 引入路由
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    // 引入仓库
    const store = useStore();
    const data = reactive({
      //搜索框
      search: "",
      activeName: "home",
      loginDialog: false, //登录对话框
      loginForm: {
        userName: "jinjude",
        password: "q278282477",
      },
      carouselList: [],
    });

    //点击登录弹出对话框
    const loginBtn = () => {
      proxy.loginDialog = true;
    };
    //点击对话框确定按钮    //获取登录Api
    const loginDiaOk = () => {
      getLoginApi(proxy.loginForm).then((res) => {
        console.log(res);
        if (res.code == "001") {
          ElMessage({
            title: "成功",
            message: res.msg,
            type: "success",
          });

          data.loginDialog = false;
        }
      });
    };

    //tebs事件
    const handleClick = (tab, event) => {
      // console.log(tab, event);
    };
    return {
      ...toRefs(data),
      handleClick,
      loginBtn, //登录弹出对话框

      loginDiaOk, //对话框确定按钮
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.m30 {
  margin: 0 30px;
}
.home_flag {
  display: flex;
  justify-content: space-between;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demonstration {
  color: var(--el-text-color-secondary);
}
.footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 50px;
  img {
    width: 100%;
  }
}
</style>
